<template>
    <div class="page-body">
        <h1>短信快捷登录</h1>
        <!-- <div class="logo-pic"></div> -->
        <div class="last-content">
            <div class="input-box">
                <div class="info1" v-show="showCloseBg" >手机号</div>
                <input type="text" v-model="account" @keyup="keyUpReturn" placeholder="手机号" class="input-username"  autocomplete="off"/>
                <div class="input-close-bg"  v-show="showCloseBg" @click="clearWord"></div>
            </div>
            <div class="input-all clearfix">
                <div class="input-close-pass-bg"   v-show="showClose"  @click="clearPassWord"></div>
                <div :class="showCloseBg && validateColor  ? 'sender-box active': 'sender-box' " class="" @click="sendValidate()" ref="box" >获取验证码</div>
                <div class="pr">
                    <div class="info2"  :style="{'visibility': showClose? '':'hidden'}">验证码</div>
                    <input type="text" v-model="pass" @keyup="keyUpReturn" placeholder="验证码"  class="input-pass"  autocomplete="off" max-length="4"/>
                </div>
            </div>

            <div :class="showClose&&showCloseBg ? 'btn-sub active': 'btn-sub' " @click="login">登录</div>
        </div>


        <div class="footer-body">首次登录将自动注册，注册则代表您同意<router-link :to="{path:'/agreement'}">【用户协议】</router-link></div>

        <div v-transfer-dom>
        <x-dialog  v-model="showDialog" hide-on-blur dialog-transition="false">
                <div class="jy-alert-box">
                    <div class="jy-alert-icon">
                    </div>
                    <div class="jy-alert-content">
                        验证码已发送到尾号{{substringAccount(account)}} <br>
                        请检查手机号码后重新获取！
                    </div>
                    <div class="btn-black"  @click="showDialog=false">知道了</div>
                </div>
        </x-dialog>
        </div>


    </div>
</template>
<script>

    import axios from 'axios'
    import { XDialog, TransferDomDirective as TransferDom } from 'vux';
    export default {
        components: {
            XDialog
        },
        directives: {
            TransferDom
        },
        data(){
            return {
                account: '',
                pass: '',
                showCloseBg:false,
                showClose:false,
                isCommitted:false,
                isCommittedForm:false,
                validateColor : true,
                showDialog:false
            }
        },
        methods:{
            substringAccount(value){
                let len = value.length;
                return value.substring(len-4,len);
            },
            closeDialog(){

            },
            checkUserName(){
                if (!this.account)
                    return this.$vux.toast.show({
                        text: '请输入帐号',
                        type: 'text',
                        position: 'top'
                });
                if (!this.account.match(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/))
                    return this.$vux.toast.show({
                        text: '请输入正确的手机号',
                        type: 'text',
                        position: 'top'
                });

                return true
            },
            login() {

                var that = this;
                that.checkUserName();
                let t = this.$route.query.redirect;
                if (!that.pass) {
                    return that.$vux.toast.show({
                        text: '请输入验证码',
                        type: 'text',
                        position: 'top'
                    });
                }

                if(!that.isCommittedForm){
                    that.isCommittedForm = true;
                    axios({
                        method: 'post',
                        url: 'mp/sms/checkVerifyCode',
                        params: {
                            mobile:that.account,
                            verifyCode:that.pass
                        }
                    }).then(res =>{
                        if(res.success){
                            axios({
                                method: 'post',
                                url: 'mp/user/getUserAndAccountInfo',
                                params: {
                                    mobile:that.account
                                }
                            }).then(res1 =>{
                               if(res1.success){
                                   this.$store.dispatch('login', res1.data).then(
                                       data => {
                                           this.$router.push({ path: t || '/uc'});
                                       }
                                   );
                               }else{
                                   return that.$vux.toast.show({
                                       text: res1.msg,
                                       type: 'text',
                                       position: 'top'
                                   });
                               }
                            });


                        }else{
                            this.$vux.toast.show({
                                text: res.msg||'登录失败',
                                width: '18em',
                                type: 'text',
                                position: 'top'
                            });
                            that.isCommittedForm = false;
                        }
                    }).catch(err =>{
                        console.log('fail'+err);
                        that.isCommittedForm = false;
                    });
                }




            },
            keyUpReturn(res){
                if(res.keyCode===13){
                    this.login();
                }else{
                    if(this.account.length>0){
                        this.showCloseBg = true;
                    }
                    if(this.pass.length>0){
                        this.showClose = true;
                    }
                }
            },
            sendValidate(){
                let that = this ,wait = 60;
                if(that.checkUserName() && !that.isCommitted){
                    that.isCommitted = true;
                    function time(o) {
                        if (wait == 0) {
                            that.isCommitted = false;
                            that.$refs.box.innerHTML = '获取验证码';
                            wait = 60;
                            that.validateColor = true;
                        } else {
                            that.$refs.box.innerHTML = ("重新发送(" + wait + ")");
                            wait--;
                            setTimeout(function() {time();}, 1000)
                        }
                    }

                    axios({
                        method: 'post',
                        url: 'mp/sms/sendVerifyCode',
                        params: {
                            mobile:this.account
                        }
                    }).then(res =>{
                        if(res.success){
                            that.showDialog = true;
                            time();
                        }else{
                            this.$vux.toast.show({
                                text: res.msg,
                                width: '18em',
                                type: 'text',
                                position: 'top'
                            });
                            that.isCommitted = false;
                        }
                    }).catch(err =>{
                        console.log('fail'+err);
                        that.isCommitted = false;
                    });

                }
            },
            clearWord(){
                 this.account = '';
            },
            clearPassWord(){
                 this.pass = '';
            },
            onFocusName(){

            },
            onBlurName(){
            }
        },
        watch:{
            pass(val,oldVal){
                if(val===''){
                    this.showClose = false;
                }
            },
            account(val,oldVal){
                if(val===''){
                    this.showCloseBg = false;
                }
            }
        },
        mounted(){
            document.title = "登录";
        }
    }
</script>
<style scoped>
    .page-body{
        width: 82%;
        margin: 0 auto;
        background:#fff;
    }
    h1{
        padding-top: .7rem;
        vertical-align: top;
        font-size: .4rem;
        letter-spacing: 1px;
        height: .46rem;
        padding-bottom: 1.5rem;
    }
    .footer-body{position: absolute;
        bottom:10%;
        left:0;
        right: 0;
        text-align: center;
        color:#666;
        font-size: .24rem;
    }
    .footer-body a{
        color:#333;
        margin-left:2px;
        margin-right: 2px;
    }
    .input-all,.input-box{
        height: .6rem;
        border-bottom:1px solid #e8e8e8;
        padding-top:.27rem;
        padding-right: .5rem;
        position: relative;
    }
    .input-all{
        padding-top: 0.1rem;
        padding-right: 2.5rem;
        height: .97rem;
    }
    .input-username{
       border: 0;
       height: .5rem;
       line-height: .5rem;
       display: block;
       width: 100%;
       outline: 0;
    }
    .input-pass{
        border: 0;
        height: .55rem;
        line-height: .54rem;
        display: block;
        width: 100%;
        outline: 0;
    }
    .info1{
        position: absolute;
        top:-1px;
        left:0;
        right:0;
        font-size: 10px;
        color:#999;
    }
    .info2{
        color:#999;
        height: .25rem;
        font-size: 10px;
    }
    .sender-box{
        float: right;
        margin-right: -2.5rem;
        width: 2rem;
        height: .65rem;
        line-height: .65rem;
        margin-top:.15rem;
        background:#e9e9e9;
        color: #fff;
        font-size: .28rem;
        text-align: center;
    }
    .sender-box.active{
        background:#3b3939
    }
    .btn-sub,.btn-black{
        width:100%;
        height: .9rem;
        line-height: .9rem;
        margin-top:.75rem;
        background:#e9e9e9;
        color: #fff;
        font-size: .28rem;
        text-align: center;
    }
    .btn-sub.active,.btn-black{
        background:#0b0b0b;
        background:-moz-linear-gradient(top,#0b0b0b,#333131);
        background:-webkit-linear-gradient(top,#0b0b0b,#333131);
    }
    .input-close-bg,.input-close-pass-bg{
        width:.3rem;
        height:.3rem;
        position: absolute;
        cursor:pointer;
        top: 0.3rem;
        right: .1rem;
        background-image:url(./../../static/img/cross.png);
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    .input-close-pass-bg{
        top: 0.4rem;
        right: 2.1rem;
    }
    .dark-bg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:500;opacity:0.3;background-color:#000;filter:alpha(opacity=30)}
    .jy-alert-box{
        padding: .4rem .7rem .7rem;
    }
    .jy-alert-icon{
        width: 2.22rem;
        height: 1.92rem;
        margin: 0 auto .5rem;
        background-image: url(../../static/img/ok1.jpg);
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    .jy-alert-content{
        font-size: .28rem;
        line-height: 1.6;
        text-align: center;
    }
</style>
